<template>
  <div class="Markdown">
    <mavon-editor
      class="mavon"
      ref="md"
      @imgAdd="$imgAdd"
      @imgDel="$imgDel"
      @save="$save"
      v-model="blog.blogContent"
      :toolbars="toolbars"
      codeStyle="dark"
    >
    </mavon-editor>
    <button @click="uploadBlog">uploadBlog</button>
    <button @click="getImageList">getImageList</button>
    <h1 class="animate__animated animate__bounce">An animated element</h1>
  </div>
  
</template>

<script>
export default {
  name: "Markdown",
  components: {},
  data() {
    return {
      blog: {
        blogTitle: "测试标题", // 博客的标题
        blogContent: "", //博客的内容
        contentImageList: [], // 博客的图片
        useDefaultMainPic:true, // 默认封面 
      },
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
    };
  },
  computed: {
    prop() {
      let data = {
        subfield: false, // 单双栏模式
        defaultOpen: "preview", //edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true,
      };
      return data;
    },
  },
  methods: {
    /*TODO
      上传单张图片
      绑定@imgAdd event

      huzixiang
      2022-01-27 10:35
    */
    $imgAdd(pos, $file) {
      // 第一步 new formdata对象 将图片存入formdata中
      var formdata = new FormData();
      formdata.append("file", $file);
      // 将图片上传
      this.axios({
        url: this.api.uploadImage,
        method: "post",
        data: formdata,
        headers: { "Content-Type": "multipart/form-data" },
      }).then((url) => {
        // 截取图片的名字 存入imageList中 方便识别用户具体上传了那些图片
        let str = url.data.data.match(/image\/(\S*)\./)[1];
        this.blog.contentImageList.push(str);
        // 将回显的图片网络地址 替换掉博客中的本地预览地址
        this.$refs.md.$img2Url(pos, url.data.data);
      });
    },
    /*TODO
      删除图片
      需要在工具栏中的图片按钮中 
      
      huzixiang
      2022-01-27 10:35
    */
    $imgDel(pos) {
      delete this.img_file[pos];
    },

    /*TODO
      遍历博客内容 通过indexOf寻找图片在博客中出现的位置 
      若为-1则表示用户在编辑博客时 将图片删除 则将imageList中对应的图片删除

      huzixiang
      2022-01-27 10:35
    */
    getImageList() {
      for (var i = 0; i < this.blog.contentImageList.length; i++) {
        if (
          this.blog.blogContent.indexOf(this.blog.contentImageList[i]) == -1
        ) {
          this.blog.contentImageList.splice(1, i);
        }
      }
    },

    /*TODO
      上传博客内容
      先调用 getImageList()方法 清除多余图片

      huzixiang
      2022-01-27 10:55
    */
    uploadBlog() {
      this.getImageList();

      let token = `eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.
      eyJhdWQiOiI3MDUyOTU1NzY3MzciLCJkYXRhIjoie1wiYXZhdG
      FyXCI6XCJtZWl5b3VcIixcImlkXCI6XCI3MDUyOTU1NzY3Mzdc
      IixcInJvbGVcIjpcIkFETUlOXCIsXCJ1c2VyTmFtZVwiOlwiaH
      p4XCJ9IiwiZXhwIjoxNjQzMjU2MzE1LCJpYXQiOjE2NDMyNTQ1
      MTV9.kX5bznKFRhrAINkfxgimKOcQgyWj8RsbVOjOa9_DLsr27
      X1VY_xCsCS-S85G8XaC_dHr1IVugjrw7IUrNI5Oe6T92zJnxS4
      9i0cvMfV1TTDdGaGLDq_6n80L7183elUFoc-G3fwDa0Ns2ZriQ
      INbEBichfzPZIMGnoXNKyl6oLQ`;
      this.axios({
        url: this.api.saveBlog,
        method: "post",
        data: this.blog,
        header:{logintoken:token}
      }).then((res) => {
        console.log(res);
      });
    },

    /* TODO
      触发ctrl+s 保存后
      保存草稿到本地

      huzixiang
      2022-01-27 11:01
    */
    $save() {
      alert("保存成功");
    },
  },
};
</script>

<style scoped>
.v-note-wrapper {
  min-height: 80vh;
  max-height: 80vh;
}
</style>
